<template>
  <div class="simple-log-tabs">
    <el-tabs v-model="activeTab" class="no-border-tabs">
      <el-tab-pane label="操作日志" name="operation"></el-tab-pane>
      <el-tab-pane label="审批日志" name="approval"></el-tab-pane>
      <el-tab-pane label="登录日志" name="login"></el-tab-pane>
    </el-tabs>   
    <!-- 内容区域 -->
    <div class="tab-content">
      <operation-log v-if="activeTab === 'operation'" />
      <ApprovalNlog v-if="activeTab === 'approval'" />
      <get-user-nlog v-if="activeTab === 'login'" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import OperationLog from '../Nlog/OperatorNlog.vue';
import ApprovalNlog from './ApprovalNlog.vue';
import GetUserNlog from './LoginNlog.vue';
const activeTab = ref('operation');

</script>

<style scoped>
.simple-log-tabs {
  padding: 20px;
}

.no-border-tabs {
  border: none;
}

/* 去掉边框和底部线 */
:deep(.el-tabs__header) {
  border: none;
  margin-bottom: 0;
}

:deep(.el-tabs__nav-wrap::after) {
  display: none;
}

/* 标签样式 */
:deep(.el-tabs__item) {
  padding: 0 20px;
  height: 36px;
  font-size: 14px;
  color: #606266;
  border: none !important;
  background: none !important;
}

:deep(.el-tabs__item.is-active) {
  color: #409eff;
  font-weight: 500;
}

/* 内容区域样式 */
.tab-content {
  margin-top: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>